<template>
  <div>
    <div id="tool" v-show="show">
      <div class="list">
        <a href="#">内容1</a>
        <a href="#">内容2</a>
        <a href="#">内容3</a>
        <a href="#">内容4</a>
        <a href="#">内容5</a>
      </div>
    </div>

    <div id="suspension">{{createSuspension ? '隐藏工具栏' : '显示工具栏' }}</div>
  </div>
</template>

<script>
const { remote } = require('electron')
export default {
  name: "suspension",
  data () {
    return {
      isMouseMove: false,
      show: false,
      createSuspension: false
    }
  },
  mounted () {
    console.log('suspension.vue');
    let win = this.$electron.remote.getCurrentWindow();
    let biasX = 0;
    let biasY = 0;
    let that = this;
    let startTime = 0
    let endTime = 0
    document.addEventListener('mousedown', function (e) {
      startTime = Date.now()
      switch (e.button) {
        case 0:
          biasX = e.x;
          biasY = e.y;
          document.addEventListener('mousemove', moveEvent);
          break;
      }
    });

    document.addEventListener('mouseup', function () {

      endTime = Date.now()
      let diffTime = endTime - startTime
      diffTime < 150 && that.newWindow() //小于150就执行单击操作
      startTime = 0
      biasX = 0;
      biasY = 0;
      document.removeEventListener('mousemove', moveEvent)
    });

    function moveEvent (e) {
      win.setPosition(e.screenX - biasX, e.screenY - biasY)
    }
  },
  methods: {
    newWindow () {
      if (this.createSuspension) {
        this.createSuspension = false
        this.show = false
        this.$electron.ipcRenderer.send('hideTool');
        remote.getCurrentWindow().setSize(80, 80)
      } else {
        this.createSuspension = true
        this.show = true
        this.$electron.ipcRenderer.send('showTool');
        remote.getCurrentWindow().setSize(200, 640)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

#suspension {
  -webkit-user-select: none;
  cursor: pointer;
  overflow: hidden;
}

#suspension {
  cursor: pointer;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #408fff;
  color: #fff;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;

}

#tool {
  cursor: pointer;
  height: 600px;
  width: 200px;
  display: flex;
  justify-content: center;
  background: #dcdfe6;
  border: 1px solid #a8b3c2;
  border-radius: 4px;
  margin-bottom: -40px;
}
.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  a{
    display: block;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    border-bottom: 1px solid #409eff;
  }
}
</style>